import React, { Component } from 'react';
import { connect } from 'dva';
import { Card } from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import styles from '../Less/BasicProfile.less';

const { Description } = DescriptionList;

@connect(({ profile, users, loading }) => ({
  users,
  profile,
  loading: loading.effects['users/fetchUserInfo'],
}))
class BasicProfile extends Component {
  componentDidMount() {
    const { dispatch, match } = this.props;
    const { params } = match;
    dispatch({
      type: 'users/fetchUserInfo',
      payload: params.id,
    });
    dispatch({
      type: 'profile/fetchBasic',
      payload: params.id,
    });
  }

  render() {
    const { loading, users = {} } = this.props;
    const { userInfo = {} } = users;

    return (
      <PageHeaderWrapper title="基础详情页" loading={loading}>
        <Card bordered={false}>
          <div>
            <div className={styles.avatarHolder}>
              <img alt="" src={userInfo.avatar} />
              <div className={styles.name}>{userInfo.name}</div>
            </div>
          </div>
          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
            <Description term="昵称">{userInfo.nickname}</Description>
            <Description term="绑定电话">{userInfo.phone}</Description>
            <Description term="上次登录时间">{userInfo.last_login_date}</Description>
            <Description term="状态">
              {userInfo.status === 0 ? (
                <Badge status="processing" text="正常" />
              ) : (
                <Badge status="error" text="已冻结" />
              )}
            </Description>
          </DescriptionList>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default BasicProfile;
